import { useState } from "react";
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
import Slider from "components/Slider";
import { Input } from "components/Input";

<Meta title="Components/Slider" component={Slider} />

# Slider

## Props

<Props of={Slider} />

## Examples

### Basic

Basic usages for `Slider` component.

<Preview>
  <Story name="basic slider">
    {() => {
      const [size, setSize] = useState("10MiB");
      return (
        <div style={{ textAlign: "center", padding: 40 }}>
          <Slider
            max={80}
            min={10}
            marks={{
              10: "10 MiB",
              20: "20 MiB",
              30: "30 MiB",
              40: "40 MiB",
              50: "50 MiB",
              60: "60 MiB",
              70: "70 MiB",
              80: "80 MiB",
            }}
            defaultValue={10}
            unit={"MiB"}
            hasTooltip
          />
          <div style={{ marginBottom: 80 }} />
          <Slider
            max={80}
            marks={{
              0: "0",
              10: "10",
              20: "20",
              30: "30",
              40: "40",
              50: "50",
              60: "60",
              70: "70",
              80: "80",
            }}
            step={2}
            defaultValue={[0, 10]}
            hasTooltip
            range
          />
          <div style={{ marginBottom: 80 }} />
          <Slider
            max={80}
            marks={{
              0: "0",
              10: "10",
              20: "20",
              30: "30",
              40: "40",
              50: "50",
              60: "60",
              70: "70",
              80: "80",
            }}
            value={size}
            unit={"MiB"}
            onChange={(value) => setSize(value)}
            withInput
          />
        </div>
      );
    }}
  </Story>
</Preview>
